<template>
  <div class="list-wrap">
    <ul class="movie-list" ref="list" :style="style">
      <template v-for="item in list">
        <li :key="item.id">
          <div class="img-area">
            <img :src="item.horizontalImg" alt="" />
            <span>{{ item.score / 10 }}</span>
          </div>
        </li>
      </template>
    </ul>
    <div @click="goBack" class="pager left" v-if="!isHead">
      <i class="iconfont icon-arrow-left-bold"></i>
    </div>
    <div @click="goNext" class="pager right" v-if="!isTail">
      <i class="iconfont icon-arrow-right-bold"></i>
    </div>
  </div>
</template>
<script>
export default {
  name: 'u-list',
  props: {
    list: {
      required: true
    }
  },
  watch: {
    list (val = []) {
      this.$refs.list.style.width = 220 * val.length - 10 + 'px'
      this.length = val.length
    },
    marginLeft (val) {
      this.style = `margin-left: ${val}px;`
    }
  },
  data () {
    return {
      marginLeft: 0,
      style: 'margin-left: 0;',
      length: 0, // list的长度
      showTailIndex: 3, // 尾部显示完整的index
      showHeadIndex: 0, // 头部显示完整的index
      timer: null
    }
  },
  methods: {
    goBack () {
      const gap = 220
      const oldPosition = this.marginLeft
      let newPosition = 0
      if (this.showHeadIndex === 0) {
        return
      }
      if (this.showHeadIndex === 1) {
        newPosition = 0
      } else {
        newPosition = oldPosition + gap
      }
      this.move(oldPosition, newPosition)
      this.showTailIndex = this.showTailIndex - 1
      this.showHeadIndex = this.showHeadIndex - 1
    },
    goNext () {
      const gap = 220
      const oldPosition = this.marginLeft
      let newPosition = 0
      if (this.showTailIndex === this.length - 1) {
        return
      } else if (this.showTailIndex === this.length - 2) {
        newPosition = -(220 * (this.length - 5) + 65)
      } else {
        newPosition = oldPosition - gap
      }
      this.move(oldPosition, newPosition)
      this.showTailIndex = this.showTailIndex + 1
      this.showHeadIndex = this.showHeadIndex + 1
    },
    move (oldP, newP) {
      const that = this
      clearInterval(this.timer)
      let current = oldP; const target = newP
      this.timer = setInterval(function () {
        // 移动的步数
        if (target > current) {
          let step = (target - current) / 10
          step = step > 0 ? Math.ceil(step) : Math.floor(step)
          current += step
          that.$nextTick(() => {
            that.marginLeft = current
          })
        } else if (target < current) {
          let step = (current - target) / 10
          step = step > 0 ? Math.ceil(step) : Math.floor(step)
          current -= step
          that.$nextTick(() => {
            that.marginLeft = current
          })
        } else {
          clearInterval(that.timer)
        }
      }, 10)
    }
  },
  computed: {
    isHead () {
      return this.showHeadIndex === 0
    },
    isTail () {
      return this.showTailIndex === this.length - 1
    }
  },
  mounted () {
    this.$refs.list.style.width = 220 * this.list.length - 10 + 'px'
    this.length = this.list.length
  }
}
</script>
<style scoped>
.list-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.movie-list {
  margin-left: 0;
  animation-name: myfirst;
  animation-duration: 0.5s;
  animation-timing-function: linear;
}
.movie-list li {
  width: 210px;
  height: 150px;
  display: inline-block;
  margin-left: 10px;
  position: relative;
}
.movie-list > li span {
  font-size: 14px;
  color: #ff5500;
  font-weight: bold;
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.movie-list li:first-child {
  margin-left: 0;
}
.movie-list li .img-area {
  height: 150px;
  width: 100%;
}
.movie-list li .img-area img {
  height: 150px;
  width: 100%;
}
.movie-list li p {
  margin-top: 5px;
  height: 44px;
  line-height: 22px;
  color: #37a;
}
.movie-list li p > strong {
  color: #e09015;
}
.list-wrap .pager {
  position: absolute;
  top: 0;
  width: 80px;
  height: 150px;
  z-index: 1;
  background: rgba(34, 34, 34, 0.7);
  color: #fff;
  text-align: center;
}
.list-wrap .pager.left {
  left: 0;
}
.list-wrap .pager.right {
  right: 0;
}
.list-wrap .pager .iconfont {
  font-size: 40px!important;
  display: inline-block;
  padding-top: 50px;
}
</style>
